<template>
  <div id="questions-dialog">
    <el-dialog
      destroy-on-close
      title="提示"
      :visible="questionsVisible"
      width="900px"
      @close="$emit('update:questionsVisible', false)"
    >
      <div>
        <ul>
          <li>
            【题型】：{{
              tableRow.questionType | numberTransformText(questionType)
            }}
          </li>
          <li>【编号】: {{ tableRow.id }}</li>
          <li>
            【难度】:
            {{ tableRow.difficulty | numberTransformText(difficulty) }}
          </li>
          <li>【标签】: {{ tableRow.tags }}</li>
          <li>【学科】: {{ tableRow.subject }}</li>
          <li>【目录】: {{ tableRow.catalog }}</li>
          <li>【方向】: {{ tableRow.direction }}</li>
        </ul>
        <el-divider></el-divider>
        <p>【题干】：</p>
        <p class="question">{{ tableRow.question | html2Text }}</p>
        <p v-if="tableRow.questionType === '1'">
          {{ tableRow.questionType | numberTransformText(questionType) }}
          选项：(以下选中的选项为正确答案)
          <el-radio
            @change="onChange"
            v-model="radio"
            v-for="item in options"
            :key="item.id"
            :label="item.isRight"
            >{{ item.title }}</el-radio
          >
        </p>
        <p v-else-if="tableRow.questionType === '2'">
          <el-checkbox
            @change="checkChange"
            v-for="item in options"
            :checked="checked == item.isRight"
            :key="item.id"
            :label="item.isRight"
            disabled
            >{{ item.title }}</el-checkbox
          >
        </p>
        <el-divider></el-divider>
        <p>
          【参考答案】：
          <el-button type="danger" size="mini" @click="videoShow = true"
            >视频答案预览</el-button
          >
        </p>
        <video v-if="videoShow" controls :src="tableRow.videoURL"></video>
        <el-divider></el-divider>
        <p>【答案解析】：{{ tableRow.answer | html2Text }}</p>
        <el-divider></el-divider>
        <p>【题目备注】：{{ tableRow.remarks }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="$emit('update:questionsVisible', false)"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions'

export default {
  name: 'QuestionsDialog',
  data () {
    return {
      difficulty, // 难度
      questionType, // 题型
      videoShow: false, // 视频显示
      options: [], // 选项
      radio: 1, // 单选框
      checked: 1 // 复选框
    }
  },
  props: {
    questionsVisible: {
      type: Boolean,
      required: true
    },
    tableRow: {
      type: [Object, Array],
      required: true
    }
  },
  created () {
    this.loadQuestionsInfo()
  },
  // 定义方法
  methods: {
    async loadQuestionsInfo () {
      try {
        const { data: res } = await detail({ id: this.tableRow.id })
        this.options = res.options
      } catch (err) {
        console.log(err)
      }
    },
    onChange (val) {
      this.radio = 1
    },
    checkChange (val) {
      if (val) {
        console.log(val)
        console.log(val - 0)
        this.checked = val - 0 + ''
      } else {
        this.checked = val - 0 + ''
      }
    }
  }
}
</script>

<style scoped lang="less">
#questions-dialog {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    li {
      width: 215px;
      padding: 10px 0;
    }
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
  .question {
    color: rgb(42, 84, 221);
  }
  video {
    width: 400px;
    height: 300px;
  }
  .el-radio,
  .el-checkbox {
    display: block;
    margin-top: 5px;
  }
  /deep/ .el-checkbox {
    .is-checked .el-checkbox__inner {
      background-color: #409eff;
    }
    .el-checkbox__inner {
      cursor: pointer;
    }
    .el-checkbox__input.is-disabled .el-checkbox__inner::after {
      cursor: unset;
    }
    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
      border-color: #fff;
    }
    .el-checkbox__input.is-disabled + span.el-checkbox__label {
      cursor: unset;
      color: #666;
    }
  }
}
</style>
